<template>
  <div>
    <!-- banner图 -->
    <div class="header-img"></div>
    <div class="brandpage_container">
      <div class="company">
        <img src="../assets/image/qiye3.png" alt="" />
        <span class="title">{{ detail.bodyName }}</span>
        <span class="financing">{{ detail.fundingRound }}轮融资</span>
      </div>
      <div class="details">
        <div class="detail_item">
          <div class="detail_title">
            <span
              ><img src="../assets/image/star-smile-fill.png" alt=""
            /></span>
            主营业务
          </div>
          <div class="detail_card">
            <p>{{ detail.mainDescription }}</p>
          </div>
        </div>
        <div class="detail_item">
          <div class="detail_title">
            <span><img src="../assets/image/shujukanban.png" alt="" /></span>
            数据业务
          </div>
          <div class="detail_card">
            <p>{{ detail.dataDescription }}</p>
          </div>
        </div>
        <div class="detail_item">
          <div class="detail_title">
            <span><img src="../assets/image/toudilishi.png" alt="" /></span>
            历史业绩
          </div>
          <div class="detail_card">
            <Editor :value="detail.performance"></Editor>
          </div>
        </div>
        <div>
          <div class="detail_title">
            <span
              ><img src="../assets/image/tianjialianxiren.png" alt=""
            /></span>
            联系方式
          </div>
          <div class="detail_card">
            <p>
              <span
                ><img src="../assets/image/lianxifangshi.png" alt="" />{{
                  detail.phone
                }}</span
              >
              <span
                ><img src="../assets/image/email.png" alt="" />{{
                  detail.managerEmail
                }}</span
              >
              <!-- <span><img src="../assets/image/icon-kefu.png" alt="" /></span> -->
              <span
                ><img src="../assets/image/address.png" alt="" />{{
                  detail.businessAddress
                }}{{ detail.businessAddressDetail }}</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面底部 -->
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { brandDetails, businessAddressName } from "../api/api";
export default {
  data() {
    return {
      userId: null,
      detail: {},
    };
  },
  props: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {
    this.userId = this.$route.query.userId;
    brandDetails(this.userId)
      .then((res) => {
        this.detail = res.data.data;
        businessAddressName(this.detail.businessAddress).then((res) => {
          this.detail.businessAddress = res.data.data.address;
          this.detail.businessAddress = this.detail.businessAddress.replace(
            /\//g,
            ""
          );
        });
      })
      .catch((err) => {
      });
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.header-img {
  height: 300px;
  background-image: url("../assets/image/xuqiu.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.brandpage_container {
  width: 1296px;
  margin: 25px auto;
  height: 100%;

  .company {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    img {
      width: 50px;
    }

    .title {
      font-size: 18px;
      letter-spacing: 2px;
    }

    .financing {
      // display: block;
      // width: 94px;
      // height: 20px;
      padding: 2px 10px;
      font-size: 13px;
      color: #fff;
      text-align: center;
      // line-height: 20px;
      border-radius: 4px;
      background-color: #6696fb;
    }
  }
  .details {
    margin-top: 25px;

    .detail_item {
      margin-bottom: 35px;
      color: #35445e;
    }
    .detail_title {
      margin-left: 10px;
      img {
        width: 16px;
      }
    }

    .detail_card {
      // min-height: 200px;
      background: #f9fbfe;
      font-size: 14px;
      border-radius: 5px;
      box-shadow: -2px 2px 5px #e0e9fd;
      background-color: #f9fbff;
      padding: 25px;

      img {
        width: 18px;
        margin-right: 2px;
        vertical-align: middle;
      }
      p {
        text-indent: 2em;
        color: #acadae;

        span {
          margin-right: 60px;
        }
      }
    }
  }
}
</style>